<template>
	<div class="welcom">
		<div class="header">
			<img class="header-logo" src="../../assets/images/logo-mini.png" />
			<div class="header-tool">
				<router-link to="/login">
					<div class="login-tool tool-list">
						<div class="tool-btn" id="tool-btn">登录</div>
						<i class="iconfont icon-geren icon-user"></i>
					</div>
				</router-link>
			</div>
		</div>
		<div class="main-container">
			<div class="content-container">
				<div class="login-container">
					<div class="login-content">
						<header class="login-header">
							<div class="header-content">
								<h3 class="sys-title">成都国际铁路港</h3>
								<span>Chengdu International Railway Port</span>
							</div>

							<router-link to="/login">
								<div class="login-btn" id="login-btn">
									<span>登录</span>
								</div>
							</router-link>
						</header>
					</div>
				</div>
			</div>
		</div>
		<div class="bg-img"></div>
	</div>
</template>
<script>
</script>
<style scoped lang="less">
	.welcom {
		margin: 0;
		padding: 0;
		border: 0;
		min-width: 1152px;
		overflow: hidden;
		font-family: "Microsoft YaHei", Arial-normal, "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 12px;
		color: #2F3557;
		background-color: rgba(0, 0, 0, .3);
	}
	
	.header {
		min-width: 1152px;
		background: #3f51b5;
		box-shadow: 0 2px 8px rgba(47, 53, 87, .2);
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 44px;
		z-index: 9999;
		color: #fff;
	}
	
	.header-logo {
		height: 32px;
		margin-left: 16px;
		margin-top: 6px;
		position: relative;
		float: left;
		border: none;
	}
	
	.header-tool {
		padding: 0 16px;
		position: relative;
		height: 44px;
		float: right!important;
	}
	
	.tool-list {
		color: #fff;
		padding: 12px 0;
		cursor: pointer;
	}
	
	.bg-img {
		opacity: 1;
		background: url(../../assets/images/login_bg.jpg) no-repeat;
		background-size: cover;
		position: fixed;
		width: 100%;
		height: 100%;
	}
	
	.main-container {
		opacity: 1;
		transition: opacity;
		transition-duration: 0.45s;
		backface-visibility: hidden;
		position: absolute;
		width: 100%;
		height: 100%;
	}
	
	.content-container {
		top: 0px;
		left: 0px;
		height: 949px;
		width: 1920px;
		opacity: 1;
		transition-property: top, opacity;
		transition-duration: .45s;
		position: absolute;
		z-index: 1000!important;
		padding-top: 44px;
	}
	
	.login-container {
		position: relative;
		width: 1040px;
		margin: 0 auto;
	}
	
	.login-content {
		padding-top: 309.5px;
		padding-bottom: 309.5px;
	}
	
	.login-header {
		text-align: center;
		min-height: 80px;
		color: #FFF;
		height: 94px;
	}
	
	.header-content {
		margin-bottom: 30px !important;
	}
	
	.header-content span {
		font-size: 14px;
		letter-spacing: 22px;
	}
	
	.header-content h3 {
		font-size: 32px;
		letter-spacing: 31px;
		margin-bottom: 16px !important;
		position: relative;
		margin: 0 auto;
	}
	
	.login-btn {
		color: #FFF;
		border-radius: 4px;
		background: rgba(33, 150, 243, .3);
		border: 2px solid #FFF;
		position: relative;
		cursor: pointer;
		width: 240px;
		height: 48px;
		line-height: 38px;
		text-align: center;
		top: 50%;
		left: 50%;
		margin-left: -120px;
	}
	
	.login-btn:hover {
		background: rgba(33, 150, 243, .5);
	}
	
	.login-btn span {
		font-size: 22px;
		letter-spacing: 11px;
		line-height: 45px;
		margin-left: 8px;
		text-decoration: none;
	}
	
	.tool-btn:hover {
		color: #2196F3;
	}
	
	.tool-btn {
		position: relative;
		cursor: pointer;
		float: right!important;
		padding-top: 4px!important;
	}
	
	.icon-user {
		font-size: 22px;
		color: #FFF;
		font-family: "iconfont" !important;
		font-style: normal;
		float: right!important;
		margin-right: 4px!important;
	}
	
	a:link {
		text-decoration: none;
	}
	
	a:visited {
		text-decoration: none;
	}
	
	a:hover {
		text-decoration: none;
	}
	
	a:active {
		text-decoration: none;
	}
</style>